<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="60vw" :title="form.typeName" unmount-on-close :mask-closable="false">
    <div class="form">
      <div class="form-item">
        <span>标题：</span>
        {{ form.title }}
      </div>
      <a-divider />
      <div class="form-item">
        <span>内容：</span>
        <i-textarea v-dompurify-html="form.content" />
      </div>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <!-- 全部消息模式 -->
        <template v-if="mode == 'all'">
          <a-button type="primary" v-if="form.lastId" @click="handleChange(form.lastId)">上一条</a-button>
          <a-button type="primary" v-if="form.nextId" @click="handleChange(form.nextId)">下一条</a-button>
        </template>
        <!-- 未读消息模式 -->
        <template v-else>
          <a-button type="primary" v-if="form.nextId" @click="handleChange(form.nextId)"> 下一条({{ form.unreadCount || 0 }}条)</a-button>
        </template>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { toNoticeDetail } from '@/api/business/message'
  import { readMsg } from '@/api/common'
  import iTextarea from '@/views/order/long-order/components/i-textarea.vue'
  import useUserStore from '@/store/modules/user'

  const userStore = useUserStore()
  const visible = ref(false)
  const form = ref({})
  // 更新通知、营销活动、系统公告
  // const emit = defineEmits(['ok'])

  // 打开弹窗
  const mode = ref('') // 模式  全部消息、未读消息
  const needPcPush = ref()
  const open = (record, mode_v = 'all', needPcPush_v) => {
    mode.value = mode_v
    needPcPush.value = needPcPush_v
    visible.value = true
    if (mode_v == 'all') {
      form.value = record
    } else {
      handleChange(record.id)
    }
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }

  // 获取详情，并更新未读消息数量
  const handleChange = (val) => {
    toNoticeDetail({
      id: val,
      // 是否是，未读消息模式
      status: mode.value == 'unread' ? 0 : undefined,
      needPcPush: needPcPush.value,
    }).then((res) => {
      form.value = res.result
      // 已读、更新未读消息数量
      readMsg({ id: val }).then(() => {
        userStore.updateUnreadMsgCount()
      })
    })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  :deep(.arco-modal-body) {
    max-height: 80vh !important;
  }
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }
  .tips-text {
    height: 20px;
    font-size: 14px;
    color: #165dff;
    line-height: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .form {
    max-height: 60vh !important;
    overflow: auto;
    .form-item {
      display: flex;
      span {
        width: 50px;
        color: #4e5969;
      }
      :deep(.arco-textarea-wrapper) {
        background-color: #ffffff;
        img {
          width: 640px;
          object-fit: contain;
          object-position: left;
        }
      }
    }
  }
</style>
